<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
<title>MyCAT EYE</title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title=""
	rel="stylesheet" />
<link title="" href="css/style.css" rel="stylesheet" type="text/css" />
<link title="blue" href="css/dermadefault.css" rel="stylesheet"
	type="text/css" />
<link title="green" href="css/dermagreen.css" rel="stylesheet"
	type="text/css" disabled="disabled" />
<link title="orange" href="css/dermaorange.css" rel="stylesheet"
	type="text/css" disabled="disabled" />
<link href="css/templatecss.css" rel="stylesheet" title=""
	type="text/css" />
<link href="css/jquery.dataTables.min.css" rel="stylesheet" title=""
	type="text/css" />
<link href="css/dataTables.semanticui.min.css" rel="stylesheet" title=""
	type="text/css" />
<link href="css/semantic.min.css" rel="stylesheet" title=""
	type="text/css" />
<link rel="stylesheet" href="css/jquery.mloading.css" />

<style type="text/css">
.sm-st {
	background: #fff;
	padding: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}

.sm-st-icon {
	width: 60px;
	height: 60px;
	display: inline-block;
	line-height: 60px;
	text-align: center;
	font-size: 30px;
	background: #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	margin-right: 10px;
	color: #fff;
}

.sm-st-info {
	font-size: 12px;
	padding-top: 2px;
}

.sm-st-info span {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.orange {
	background: #fa8564 !important;
}

.tar {
	background: #45cf95 !important;
}

.sm-st .green {
	background: #86ba41 !important;
}

.pink {
	background: #AC75F0 !important;
}

.yellow-b {
	background: #fdd752 !important;
}

.stat-elem {
	background-color: #fff;
	padding: 18px;
	border-radius: 40px;
}

.stat-info {
	text-align: center;
	background-color: #fff;
	border-radius: 5px;
	margin-top: -5px;
	padding: 8px;
	-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
	font-style: italic;
}

.stat-icon {
	text-align: center;
	margin-bottom: 5px;
}

.st-red {
	background-color: #F05050;
}

.st-green {
	background-color: #27C24C;
}

.st-violet {
	background-color: #7266ba;
}

.st-blue {
	background-color: #23b7e5;
}

.stats .stat-icon {
	color: #28bb9c;
	display: inline-block;
	font-size: 26px;
	text-align: center;
	vertical-align: middle;
	width: 50px;
	float: left;
}

.stat {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	margin-right: 10px;
}

.stat .value {
	font-size: 20px;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}

.stat .name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.stat.lg .value {
	font-size: 26px;
	line-height: 28px;
}

.stat.lg .name {
	font-size: 16px;
}

.stat-col .progress {
	height: 2px;
}

.stat-col .progress-bar {
	line-height: 2px;
	height: 2px;
}

.item {
	padding: 30px 0;
}
</style>
</head>

<body>
	<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
	<div class="navbar-header">
		<button class="navbar-toggle" data-toggle="collapse"
			data-target=".navbar-collapse">
			<span class="icon-bar"></span> <span class="icon-bar"></span> <span
				class="icon-bar"></span>
		</button>
		<a class="navbar-brand mystyle-brand"><span
			class="glyphicon glyphicon-home"></span></a>
	</div>
	<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li class=""><a class="mystyle-color" href="../index.html">MyCAT
					EYE&nbsp;&nbsp;&nbsp;</a></li>
		</ul>
		<ul class="nav navbar-nav pull-right">
			<li class="dropdown"><a href="#"
				class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前节点：<span
					id="currentServerId"></span><span class="caret"></span></a>
				<ul class="dropdown-menu" id="ulNodeList">

				</ul></li>
			<li class="dropdown"><a href="#"
				class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;集群管理<span
					class="caret"></span></a>
				<ul class="dropdown-menu changecolor">
					<li id="blue"><a href="cluster-manage.html">集群管理</a></li>
					<li id="blue"><a href="node-manage.html">节点管理</a></li>
					<!-- <li class="divider"></li>
					<li id="green"><a href="#">MongoDB集群</a></li> -->
				</ul></li>
			<li class="dropdown li-border"><a href="#"
				class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;<span
					id="login_admin"></span><span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
					<li><a href="javascript:void(0)" id="logout">退出</a></li>
				</ul></li>
		</ul>
	</div>
	</nav>
	<div class="down-main">
		<div class="left-main left-full">
			<div class="sidebar-fold">
				<span class="glyphicon glyphicon-menu-hamburger"></span>
			</div>
			<div class="subNavBox">
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon glyphicon glyphicon-chevron-down"></span><span
							class="sublist-title">常用功能</span>
					</div>
					<ul class="navContent" style="display: block">
						<li class="active">
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />控制台
							</div> <a href="dashboard.html"><span
								class="sublist-icon glyphicon glyphicon-stats"></span><span
								class="sub-title">控制台</span></a>
						</li>
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />变量管理
							</div> <a href="var-manage.html"><span
								class="sublist-icon glyphicon glyphicon-signal"></span><span
								class="sub-title">变量管理</span></a>
						</li>
					</ul>
				</div>

				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon glyphicon glyphicon-chevron-down"></span><span
							class="sublist-title">InnoDB引擎</span>
					</div>
					<ul class="navContent" style="display: block">
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />基本状态
							</div> <a href="innodb-status.html"><span
								class="sublist-icon glyphicon glyphicon-heart-empty"></span><span
								class="sub-title">基本状态</span></a>
						</li>
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />事务查看
							</div> <a href="innodb-trx.html"><span
								class="sublist-icon glyphicon glyphicon-retweet"></span><span
								class="sub-title">事务查看</span></a>
						</li>
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />锁等待信息
							</div> <a href="innodb-lockwaits.html"><span
								class="sublist-icon glyphicon glyphicon-lock"></span><span
								class="sub-title">锁等待信息</span></a>
						</li>
					</ul>
				</div>
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon glyphicon glyphicon-chevron-down"></span><span
							class="sublist-title">集群管理</span>
					</div>
					<ul class="navContent" style="display: block">
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />集群管理
							</div> <a href="cluster-manage.html"><span
								class="sublist-icon glyphicon glyphicon-list"></span><span
								class="sub-title">集群管理</span></a>
						</li>
						<li>
							<div class="showtitle" style="width: 100px;">
								<img src="img/leftimg.png" />节点管理
							</div> <a href="node-manage.html"><span
								class="sublist-icon glyphicon glyphicon-hdd"></span><span
								class="sub-title">节点管理</span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="right-product right-full">
			<div class="container-fluid">
				<div class="info-center">
					<div class="page-header">
						<div class="pull-left">
							<h4>控制台</h4>
						</div>
					</div>
					<div class="manage-detail">
						<div class="panel panel-default panel-intro">
							<div class="panel-heading">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#one" data-toggle="tab">概要信息</a>
									</li>
									<li><a href="#two" data-toggle="tab">当前进程</a></li>
								</ul>
							</div>
							<div class="panel-body">
								<div id="myTabContent" class="tab-content">
									<div class="tab-pane fade active in" id="one">
										<div class="row">
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-red"><i
														class="glyphicon glyphicon-plane"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="uptime"></span> 运行时长
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-violet"><i
														class="glyphicon glyphicon-random"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="threadsRunning"></span> 当前连接数
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-blue"><i
														class="glyphicon glyphicon-hourglass"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="dataTotal"></span> 数据量
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-green"><i
														class="glyphicon glyphicon-italic"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="innoDBBufferPoolSize"></span> InnoDB缓存使用率
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-lg-12">
												<div id="qpsChart" style="width: 100%; height: 350px;"></div>
											</div>

										</div>
										<div class="row">
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-red"><i
														class="glyphicon glyphicon-log-out"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="bytesSent"></span> 发送（流量）
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-violet"><i
														class="glyphicon glyphicon-log-in"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="bytesReceived"></span> 接受（流量）
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-blue"><i
														class="glyphicon glyphicon-tasks"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="schemaTotal"></span> Schema数量
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-green"><i
														class="glyphicon glyphicon-list-alt"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="tableTotal"></span> Table数量
													</div>
												</div>
											</div>
										</div>
										<div class="row" style="margin-top: 15px;">

											<div class="col-lg-12">
												<h4>语句统计</h4>
											</div>
											<div class="col-lg-12">
												<div id="queryChart" style="width: 100%; height: 350px;"></div>
											</div>

										</div>

									</div>
									<div class="tab-pane fade" id="two">
										<div class="row">
											<div class="col-xs-12">
												<div class="box box-danger">
													<div class="box-body">
														<div class="widget-body no-padding">
															<div id="toolbar" class="toolbar">
																<a href="javascript:;" id="reload"
																	class="btn btn-primary btn-refresh"><i title="刷新进程"
																	class="glyphicon glyphicon-refresh"></i> </a>
															</div>
															<div class="table-responsive no-padding">
																<table class="table  table-hover" style="width: 100%"
																	id="processlist">
																	<thead>
																		<tr>
																			<th>ID</th>
																			<th>User</th>
																			<th>Host</th>
																			<th>db</th>
																			<th>Comand</th>
																			<th>Time</th>
																			<th>State</th>
																			<th>Info</th>
																		</tr>
																	</thead>
																	<tbody id="tbCluster">
																		<!--
																	                    	加载进程列表
																	                    -->
																	</tbody>
																</table>
															</div>

														</div>
													</div>
												</div>
											</div>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- javascript -->
	<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="script/jquery.cookie.js" type="text/javascript"></script>
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"
		type="text/javascript"></script>
	<script src="script/bootbox.min.js" type="text/javascript"></script>
	<script src="script/echarts.common.min.js"></script>
	<script src="script/jquery.dataTables.min.js"></script>
	<!-- 自定义javascript -->
	<script src="script/custom/menu.js"></script>
	<script src="script/custom/login-auth.js"></script>
	<script src="script/custom/modify-password.js"></script>
	<script src="script/custom/current-node.js"></script>
	<script src="script/custom/dashboard.js"></script>
	<!-- loading效果 -->
	<script src="script/jquery.mloading.js"></script>
</body>
</html>